// Thanks to: https://github.com/airyland/vux/blob/v2/src/directives/transfer-dom/index.js
// Thanks to: https://github.com/calebroseland/vue-dom-portal

import { DirectiveOptions, VNode } from 'vue';


/**
 * Get target DOM Node
 * @param {(Node|string|Boolean)} [node=document.body] DOM Node, CSS selector, or Boolean
 * @return {Node} The target that the el will be appended to
 */
function getTarget(node: any) {
  if (node === void 0) {
    node = document.body
  }
  if (node === true) { return document.body }
  return node instanceof window.Node ? node : document.querySelector(node)
}

const directive: DirectiveOptions = {
  inserted(el: HTMLElement, { value }, vnode: VNode) {
    if (el.dataset && el.dataset.transfer !== 'true') return false;
    el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
    const parentNode = el.parentNode;
    if (!parentNode) return;
    const home = document.createComment('');
    let hasMovedOut = false;

    if (value !== false) {
      parentNode.replaceChild(home, el); // moving out, el is no longer in the document
      getTarget(value).appendChild(el); // moving into new place
      hasMovedOut = true
    }
    if (!(el as any).__transferDomData) {
      (el as any).__transferDomData = {
        parentNode: parentNode,
        home: home,
        target: getTarget(value),
        hasMovedOut: hasMovedOut
      }
    }
  },
  componentUpdated(el: HTMLElement, { value }) {
    if (el.dataset && el.dataset.transfer !== 'true') return false;
    // need to make sure children are done updating (vs. `update`)
    const ref$1 = (el as any).__transferDomData;
    if (!ref$1) return;
    // homes.get(el)
    const parentNode = ref$1.parentNode;
    const home = ref$1.home;
    const hasMovedOut = ref$1.hasMovedOut; // recall where home is

    if (!hasMovedOut && value) {
      // remove from document and leave placeholder
      parentNode.replaceChild(home, el);
      // append to target
      getTarget(value).appendChild(el);
      (el as any).__transferDomData = Object.assign({}, (el as any).__transferDomData, { hasMovedOut: true, target: getTarget(value) });
    } else if (hasMovedOut && value === false) {
      // previously moved, coming back home
      parentNode.replaceChild(el, home);
      (el as any).__transferDomData = Object.assign({}, (el as any).__transferDomData, { hasMovedOut: false, target: getTarget(value) });
    } else if (value) {
      // already moved, going somewhere else
      getTarget(value).appendChild(el);
    }
  },
  unbind(el: HTMLElement) {
    if (el.dataset && el.dataset.transfer !== 'true') return false;
    el.className = el.className.replace('v-transfer-dom', '');
    const ref$1 = (el as any).__transferDomData;
    if (!ref$1) return;
    if ((el as any).__transferDomData.hasMovedOut === true) {
      (el as any).__transferDomData.parentNode && (el as any).__transferDomData.parentNode.appendChild(el)
    }
    (el as any).__transferDomData = null
  }
};

export default directive;